import React from "react";

/**
 *
 * <Child>文本子节点</Child>
 *
 * <Child><p>我是标准HTML，p标签子节点</p></Child>
 *
 * const fun = () => <div>我是一个函数子节点</div>
 * <Child>{fun}</Child>
 *
 */

class Parent extends React.Component {
  fun = () => <div>我是一个函数子节点</div>
  render() {
    return (
      <div>
        <h1>我是父节点</h1>
        <hr/>
        {/* <Child>我是文本子节点</Child> */}
        <Child>{this.fun}</Child>
      </div>
    );
  }
}

class Child extends React.Component {
  render() {
    return (
      <div>
        {/* 使用children属性 */}
        <h2>我是子节点, 下面是父组件通过children属性传递过来的数据</h2>
        {this.props.children()}
      </div>
    );
  }
}

export default Parent;
